<template>
  <div class="bi-wrap">
    <div class="bi-btn-group">
      <button class="btn btn-text bi-btn-lt" @click="back">
        <i class="fa fa-angle-left"></i>
        返回
      </button>
      <button class="btn btn-text bi-btn-lt" @click="toggleFullScreen">
        <i class="fa fa-desktop"></i>
        全屏(F11)
      </button>
    </div>
    <iframe
      :src="`https://datav.aliyun.com/share/${id}`"
      frameborder="0"
      scrolling="auto"
      width="100%"
      height="100%"
      id="bi-frame"
    ></iframe>
  </div>
</template>

<script>
import screenfull from 'screenfull'

export default {
  components: {},
  props: {},
  data() {
    return {}
  },
  computed: {
    id() {
      return this.$route.params.id
    },
  },
  watch: {},
  created() {},
  mounted() {
    this.toggleFullScreen()
    this.changeFrameHeight()
    window.addEventListener('resize', this.changeFrameHeight)
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.changeFrameHeight)
  },
  methods: {
    back() {
      if (screenfull.isFullscreen) {
        this.toggleFullScreen()
      }
      this.$router.back()
    },
    toggleFullScreen() {
      if (!screenfull.isEnabled) {
        return this.$message.warning('很抱歉，您的浏览器不支持全屏！')
      }
      screenfull.toggle()
    },
    changeFrameHeight() {
      let ifm = document.getElementById('bi-frame')
      if (ifm) {
        ifm.height = document.documentElement.clientHeight || document.body.clientHeight
      }
    },
  },
}
</script>
<style scoped lang="scss">
.bi-wrap {
  position: relative;
  overflow: hidden;
  height: 100vh;
}

.bi-btn-group {
  position: absolute;
  top: 8px;
  left: 10px;
  opacity: 0;
  &:hover,
  &:focus {
    opacity: 1;
  }
}

.bi-btn-lt {
  color: rgba(255, 255, 255, 0.3);
  &:focus {
    outline: 0;
  }
}

#bi {
  min-height: 100vh;
}
</style>
